import React, { ReactChild, Fragment, cloneElement } from 'react'
import { Toast, WhiteSpace } from 'antd-mobile';
import Router from 'next/router'
// @ts-ignore
import HomeIcon from '../../../icons/home.svg'
// @ts-ignore
import OthersIcon from '../../../icons/others.svg'
// @ts-ignore
import Styles from './index.scss'
// @ts-ignore
import ResumeIcon from '../../../icons/arrow-right.svg'

interface PropsInterface {
  // 跳转界面的路径
  toPath?: string
  // 点击事件
  cellClick?: Function
  // 标题
  title?: string
  // 字标提
  subTitle?: string
  // children
  children?: ReactChild
  // 箭头
  arrow: boolean
  // 顶部间隔
  top: boolean
  // 底部间隔
  bottom: boolean
  // 底部线
  line: boolean
  // 图标
  icon?: JSX.Element
}

const WJumpCell = (props: PropsInterface) => {

  /**
   * 行点击
   */
  const cellClick = () => {
    if (props.toPath) {
      Router.push(props.toPath)
    } else if (props.cellClick) {
      props.cellClick()
    } else {
      Toast.offline('尽请期待', 1);
    }
  }

  return (
    <Fragment>
      {
        props.top ? <WhiteSpace /> : null
      }
      <div className={`${Styles['jump-cell']} ${Styles['jump-cell-line']}`} onClick={cellClick}>
        {
          props.icon ?
            cloneElement(props.icon, {
              className: Styles['cell-icon']
            }) : null
        }
        <span className={Styles['cell-title']}>
          {
            props.children || props.title
          }
        </span>
        {
          props.subTitle ? <span className={Styles['cell-subtitle']}>{props.subTitle}</span> : null
        }
        {
          props.arrow ? <ResumeIcon className={Styles['arrow-icon']} /> : null
        }
      </div>
      {
        props.bottom ? <WhiteSpace /> : null
      }
    </Fragment>
  )
}

WJumpCell.defaultProps = {
  arrow: true,
  top: true,
  bottom: false,
  line: false,
};

export default WJumpCell